<template>
	<div class="app">
		<h2>{{ msg }}</h2> <!--读取第1次-->
		<input type="text" v-model="msg"> <!--读取第2次或修改一次-->
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, customRef } from "vue"
import useMsgRef from './useMsgRef'
// 默认ref
// let msg = ref('Hello')
// 定义一个延迟响应的msg响应式对象
let { msg } = useMsgRef('Raymond', 1000)
</script>


<style>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>